/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="gpu-user__wrap">
        <p class="gpu-user__title">vGPU使用情况</p>
        <empty-panel v-if="!data.length"
                     :title="_('暂无数据')" />
        <sf-e-charts v-else
                     ref="line"
                     :options="barOptions"
                     :autoDestroy="false"
                     :autoRefresh="true"></sf-e-charts>

    </div>
</template>
<style lang="less" scoped>
    .gpu-user__wrap {
        width: 32%;
        height: 330px;
        background: #FFF;
        padding: 15px 30px 30px;
        border-radius: 6px;

        .gpu-user__title {
            font-size: 14px;
            font-weight: bold;
        }
    }
</style>
<script>
    import EmptyPanel from 'src/components/empty_panel.vue';
    export default {

        props: {
            data: {
                type: Array,
                default: () => []
            }
        },
        components: {
            EmptyPanel
        },

        data () {
            return {
                barOptions: {},
                xAxis: [],
                seriesData: [],
                maxY: 0
            };
        },

        watch: {
            data: {
                deep: true,
                immediate: true,
                handler () {
                    this.resizeLine()
                }
            }
        },

        methods: {
            resizeLine () {
                this.handlerData();
                this.$nextTick().then(() => {
                    this._initLineChart();
                });
            },

            handlerData () {
                this.xAxis = this.data.map(item => item.name);
                this.seriesData = this.data.map(item => item.value);
                this.maxY = Math.ceil(Math.max(...this.seriesData));
            },

            _initLineChart () {

                let vm = this;
                this.barOptions = {
                    tooltip: {
                        backgroundColor:'#fff',
                        padding:10,
                        borderWidth:1,
                        borderColor:'#ddd',
                        textStyle:{
                            color:'#5C5C5C'
                        },
                        trigger: 'item',
                        formatter: '{c} 个'
                    },
                    grid: {
                        top: 40,
                        bottom: 40
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: vm.xAxis,
                            axisTick:{
                                show:false
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#eee'
                                }
                            },
                            axisLabel:{
                                color:'#14161A'
                            },
                            splitLine:{
                                lineStyle:{
                                    color:['#eee']
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLine:{
                                show:false
                            },
                            splitLine: {    // y轴分割线
                                show: true,
                                lineStyle: {
                                    color: '#eee'
                                }
                            },
                            axisTick:{
                                show:false
                            },
                            max: vm.maxY,
                            interval: Math.ceil(vm.maxY / 5)
                        }
                    ],
                    series: [
                        {
                            type: 'bar',
                            data: vm.seriesData,
                            barWidth: 10
                        }
                    ],
                    color:['#64c2f8']
                }
            }
        }
    };
</script>
